<template>
  <div class="dept__wrapeer">
    <div class="dept__top">
      <el-form :inline="true" :model="queryForm" ref="queryForm">
        <el-form-item label="部门名称" prop="menuName">
          <el-input
            placeholder="部门名称"
            v-model="queryForm.menuName"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getDeptList">查询</el-button>
          <el-button type="primary" @click="resetForm('queryForm')"
            >重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
  <div class="dept__bottom">
    <div class="active">
      <el-button type="primary" v-has:add="'dept-add'" @click="handeAdd()"
        >新增</el-button
      >
    </div>
    <el-table
      :data="deptList"
      row-key="_id"
      :tree-props="{ children: 'children' }"
      style="width: 100%"
    >
      <el-table-column
        v-for="item in deptCloum"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
        :formatter="item.formatter"
        :width="item.width"
        align="center"
      >
      </el-table-column>
      <el-table-column label="操作" width="250px">
        <template #default="scope">
          <el-button
            size="mini"
            v-has:edit="'dept-edit'"
            @click="handeEdit(scope.row)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handeDeleted(scope.row._id)"
            v-has:del="'dept-del'"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
  <el-dialog
    :title="action == 'add' ? '新增部门' : '编辑部门'"
    v-model="dialogShow"
    width="600px"
  >
    <el-form
      :model="deptForm"
      :rules="rules"
      ref="deptForm"
      label-width="100px"
    >
      <el-form-item label="上级部门" prop="parentId">
        <el-cascader
          v-model="deptForm.parentId"
          clearable
          placeholder="请选择上级部门"
          :options="deptList"
          :props="{ checkStrictly: true, value: '_id', label: 'deptName' }"
          :show-all-levels="true"
        />
      </el-form-item>
      <el-form-item label="部门名称" prop="deptName">
        <el-input
          placeholder="请输入部门名称"
          v-model="deptForm.deptName"
          width="100"
        ></el-input>
      </el-form-item>
      <el-form-item label="负责人" prop="user">
        <el-select
          placeholder="请选择部门负责人"
          v-model="deptForm.user"
          @change="changeUserEmail"
        >
          <el-option
            v-for="item in userList"
            :key="item.userId"
            :label="item.userName"
            :value="`${item.userId}/${item.userName}/${item.userEmail}`"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="负责人邮箱" prop="userEmail">
        <el-input
          placeholder="请输入负责人邮箱"
          v-model="deptForm.userEmail"
          disabled
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handeClose">取 消</el-button>
        <el-button type="primary" @click="handeSubmit">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import util from '@/utils/utils.js'
export default {
  name: 'dept',
  data () {
    return {
      queryForm: {},
      deptList: [],
      deptForm: {
        parentId: [null]
      },
      dialogShow: false,
      userList: [],
      deptCloum: [
        {
          label: "部门名称",
          prop: "deptName",
          width: "150"
        },
        {
          label: "负责人",
          prop: "userName"
        },
        {
          label: "更新时间",
          prop: "updateTime",
          formatter (row, cloum, value) {
            return util.formateDate(new Date(value))
          }
        },
        {
          label: "创建时间",
          prop: "createTime",
          formatter (row, cloum, value) {
            return util.formateDate(new Date(value))
          }
        },
      ],
      rules: {
        parentId: { required: true, message: "请选择上级部门", trigger: "blur" },
        deptName: { required: true, message: "请输入部门名称", trigger: "blur" },
        user: { required: true, message: "请选择负责人", trigger: "blur" },
      },
      action: 'add'
    }
  },
  mounted () {
    this.getDeptList()
    this.getUserList()
  },
  methods: {
    resetForm (form) {
      this.$refs[form].resetFields()
    },
    async getDeptList () {
      try {
        const res = await this.$api.getDeptList({})
        this.deptList = res
      } catch (error) {
        throw new Error(error)
      }
    },
    async getUserList () {
      try {
        const list = await this.$api.getAllUserList()
        this.userList = list
      } catch (error) {
        throw new Error(error)
      }
    },
    handeAdd () {
      this.action = 'add'
      this.dialogShow = true
    },
    handeClose () {
      this.resetForm('deptForm')
      this.dialogShow = false
    },
    changeUserEmail (val) {
      const [userId, userName, userEmail] = val.split('/')
      Object.assign(this.deptForm, { userId, userName, userEmail })
    },
    handeSubmit () {
      this.$refs.deptForm.validate(async valid => {
        if (valid) {
          let params = { ...this.deptForm, action: this.action }
          delete params.user
          try {
            await this.$api.deptSubmit(params)
            this.handeClose()
            this.getDeptList()
            this.$message.success('操作成功')
          } catch (error) {
            this.$message.error(error)
          }

        }
      })
    },
    async handeDeleted (_id) {
      this.action = 'delete'
      try {
        await this.$api.deptSubmit({ _id, action: this.action })
        this.getDeptList()
        this.$message.success('删除成功')
      } catch (error) {
        this.$message.error('删除失败')
      }
    },
    handeEdit (row) {
      this.action = 'edit'
      this.dialogShow = true
      this.$nextTick(() => {
        Object.assign(this.deptForm, row, {
          user: `${row.userId}/${row.userName}/${row.userEmail}`
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.dept__wrapeer {
  background: #fff;
}
.dept__top {
  height: 0.8rem;
  padding: 0.24rem;
  border-bottom: 0.01rem solid #ebeef1;
}
.dept__bottom {
  background: #ebeef1;
  padding-top: 0.3rem;
  .active {
    background: #fff;
    padding: 0.27rem;
  }
  .pages {
    text-align: right;
    padding: 0.1rem 0.27rem;
    background: #fff;
  }
}
</style>